<template>
    <div class="header">
        <el-icon @click="$emit('update:collapse', !props.collapse)" :title="props.collapse ? '展开菜单' : '收起菜单'" :size="22">
            <Fold v-show="!props.collapse" />
            <Expand v-show="props.collapse" />
        </el-icon>
        <el-breadcrumb :separator-icon="ArrowRight" class="menu">
            <el-breadcrumb-item v-for="r in $route.matched" :to="r.path">{{ r.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown class="avatar" title="个人中心">
            <!-- <img height="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt=""> -->
            <el-avatar shape="circle" :size="30"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>
                        个人中心
                    </el-dropdown-item>
                    <el-dropdown-item @click="emit('logout')">
                        退出登录
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <router-link target="_blank" tag="button" to="/" title="网站首页" class="button">
            <el-icon :size="28">
                <ChromeFilled />
            </el-icon>
        </router-link>
    </div>
</template>

<script setup lang="ts">
import { Fold, Expand, ArrowRight, ChromeFilled } from '@element-plus/icons-vue'

const props = defineProps<{
    collapse: boolean,
}>()
const emit = defineEmits<{
    (e: 'update:collapse', val: boolean): void,
    (e: 'logout'): void,
}>()
</script>

<style lang="scss" scoped>
.header {
    height: 100%;
    margin: 0 -20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--el-border-color);

    .el-icon {
        cursor: pointer;
    }

    .menu {
        flex: 1;
    }

    .avatar {
        cursor: pointer;
    }

    .button {
        display: flex;
    }
}
</style>